<template>
	<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
	<view class="u-demo-block" style="padding: 20rpx;">
		<view class="btnCity" @click="btnCitys">
			<u-icon :label="city.name" size="20" labelSize="12" name="map-fill" color="#48AACA"></u-icon>
		</view>

		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
		<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular radius="5" bgColor="#ffffff"></u-swiper>

		<view style="padding: 20rpx;" class="u-demo-block__content">
			<u-row justify="space-between" gutter="10">
				<u-col span="3">
					<u-icon label="专业陪诊" size="20" labelSize="12" name="server-man" color="#48AACA"></u-icon>
				</u-col>
				<u-col span="3">
					<u-icon label="高效就医" size="20" labelSize="12" name="integral-fill" color="#E64032"></u-icon>
				</u-col>
				<u-col span="3">
					<u-icon label="精准就医" size="20" labelSize="12" name="edit-pen-fill" color="#FAC222"></u-icon>
				</u-col>
				<u-col span="3">
					<u-icon label="高端之选" size="20" labelSize="12" name="coupon-fill" color="#249444"></u-icon>
				</u-col>
			</u-row>
		</view>
		<view>
			<u-notice-bar :text="text1" fontSize="12"></u-notice-bar>
		</view>
		<view style="margin-top: 20rpx;" class="u-demo-block__content">
			<u-row customStyle="margin-bottom: 10px" gutter="10">
				<u-col span="6">
					<view class="navBar navleft" @click="gotoService(0)">
						<view class="navTit">就医陪诊</view>
						<view class="navTls">专业服务</view>
						<view class="navTls">全程照护</view>
						<view style="float: right;">
							<u--image :src="require('@/static/index/nav1.png')" width="220rpx"
								height="180rpx"></u--image>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="navBar navtop" @click="gotoService(1)">
						<view class="navbox">
							<view class="navTitle">辅助就医</view>
							<view class="navText">就医规划</view>
							<view class="navText">精准就医</view>
						</view>
						<view style="padding-top: 16rpx;">
							<u--image :src="require('@/static/index/nav2.png')" width="140rpx"
								height="140rpx"></u--image>
						</view>
					</view>
					<view class="navBar navbtm" @click="gotoService(2)">
						<view class="navbox">
							<view class="navTitle">诊前咨询</view>
							<view class="navText">一键对接</view>
							<view class="navText">安心寻医</view>
						</view>
						<view style="padding-top: 16rpx;">
							<u--image :src="require('@/static/index/nav3.png')" width="140rpx"
								height="140rpx"></u--image>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view>
			<view class="u-demo-block__content">
				<u-row customStyle="margin-bottom: 10px" gutter="10">
					<u-col span="6">
						<view class="tabbox tabbox1" @click="gotoService(3)">
							<view class="tableft">
								<view class="tabstbe tabstbe1">住院陪护</view>
								<view class="tabcont">贴心陪伴</view>
								<view class="tabcont">专业护理</view>
							</view>
							<view class="tabimg">
								<u--image :src="require('@/static/index/tab1.png')" width="140rpx"
									height="120rpx"></u--image>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="tabbox tabbox2" @click="gotoService(4)">
							<view class="tableft">
								<view class="tabstbe tabstbe2">代办买药</view>
								<view class="tabcont">便捷高效</view>
								<view class="tabcont">省时省力</view>
							</view>
							<view class="tabimg">
								<u--image :src="require('@/static/index/tab2.png')" width="140rpx"
									height="120rpx"></u--image>
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px" gutter="10">
					<u-col span="6">
						<view class="tabbox tabbox3" @click="gotoService(5)">
							<view class="tableft">
								<view class="tabstbe tabstbe3">院内服务</view>
								<view class="tabcont">出入院办理</view>
								<view class="tabcont">住院探望</view>
							</view>
							<view class="tabimg">
								<u--image :src="require('@/static/index/tab3.png')" width="140rpx"
									height="120rpx"></u--image>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="tabbox tabbox4" @click="gotoService(6)">
							<view class="tableft">
								<view class="tabstbe tabstbe4">送取服务</view>
								<view class="tabcont">便捷高效</view>
								<view class="tabcont">省时省力</view>
							</view>
							<view class="tabimg">
								<u--image :src="require('@/static/index/tab4.png')" width="140rpx"
									height="120rpx"></u--image>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				city: {
					name: '长沙市',
					id: 1
				},
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: false,
				columns: [
					['湖南省', '湖北省'],
					['长沙市', '株洲市', '湘潭市', '岳阳市'],
				],
				columnData: [
					['长沙市', '株洲市', '湘潭市', '岳阳市'],
					['武汉市', '荆州市', '宜昌市']
				],
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['proIndex']),
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				console.log(columnIndex);
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e.value[1]);
				this.show = false;
				this.city.name = e.value[1];
			},
			btnCitys() {
				this.show = true;
			},
			gotoService(e) {
				this.proIndex(e);
				uni.switchTab({
					url: '../service/service',
				})
			},
		}
	}
</script>

<style lang="scss">
	.btnCity {
		padding-bottom: 20rpx;
	}

	.navBar {
		width: 100%;
		color: #ffffff;
		border-radius: 5%;
	}

	.navleft {
		height: 360rpx;
		background: linear-gradient(to right, #48AACA, #9DDDE2);
	}

	.navtop {
		height: 170rpx;
		background: linear-gradient(to right, #CBF2B9, #5BC877);
	}

	.navbtm {
		height: 170rpx;
		background: linear-gradient(to right, #F9D689, #FCAD3B);
		margin-top: 20rpx;
	}

	.navTit {
		padding: 20rpx;
	}

	.navTitle {
		padding: 20rpx;
	}

	.navTls {
		padding-left: 20rpx;
		font-size: 24rpx;
	}

	.navbox {
		float: right;
		text-align: right;
	}

	.navText {
		padding-right: 20rpx;
		font-size: 24rpx;
	}

	.tabbox {
		border-radius: 12rpx;
		padding: 20rpx;
		overflow: hidden;
	}

	.tableft {
		display: inline-block;
		float: left;
	}

	.tabstbe {
		padding-bottom: 10rpx;
	}

	.tabcont {
		color: #707070;
		font-size: 24rpx;
	}

	.tabimg {
		display: inline-block;
		float: right;
		// opacity: 0.6;
	}

	.tabbox1 {
		border: 1px #55B2CE solid;
		border-left: 10rpx #55B2CE solid;
	}

	.tabstbe1 {
		color: #55B2CE;
	}

	.tabbox2 {
		border: 1px #6CCE81 solid;
		border-left: 10rpx #6CCE81 solid;
	}

	.tabstbe2 {
		color: #6CCE81;
	}

	.tabbox3 {
		border: 1px #FCB346 solid;
		border-left: 10rpx #FCB346 solid;
	}

	.tabstbe3 {
		color: #FCB346;
	}

	.tabbox4 {
		border: 1px #DE6B60 solid;
		border-left: 10rpx #DE6B60 solid;
	}

	.tabstbe4 {
		color: #DE6B60;
	}
</style>